<div class="one-notbreadcrumb one-map-container">
  <!--地图标题-->
  <!--<div class="one-map-title">-->
    <!--温县防治作战图-->
  <!--</div>-->
  <!--实时监测视频-->
  <div class="one-map-real-video">
    <div class="one-map-video-header">
      <span class="one-map-video-title">实时视频</span>
      <span class="one-map-video-close" (click)="closeParent(video)" #video>&times;</span>
    </div>
  </div>
  <!--网格职责-->
  <div class="one-map-grid-duty">
    <div class="one-map-video-header">
      <span class="one-map-video-title">网格职责</span>
      <span class="one-map-video-close" (click)="closeParent(gridDuty)" #gridDuty>&times;</span>
    </div>
    <div class="one-map-grid-duty-body">
    </div>
  </div>
  <!--站点信息-->
  <div class="one-map" *ngIf="isNormalMap">
    <div class="one-map-detail" style="top: 0;bottom: 0;">
      <div class="one-site-detail">
        <div class="one-site-state" *ngIf="isGrid">
          <input type="checkbox" class="stateChoose one-hide" id="one-single-state">
          <label for="one-single-state" class="one-check-box" (click)="singleOrMultiple($event)"></label>
          <span>多选</span>
        </div>
        <div class="text-center" style="margin-top: 10px;">
          <div class="one-map-ranking-btn">
            <div class="btn" [class.active]="agentType=='grid'" (click)="agentClick('grid')">网格管控</div>
            <div class="btn" [class.active]="agentType=='pollute'" (click)="agentClick('pollute')">污染监管</div>
          </div>
        </div>
        <div class="one-site-container">
          <div class="one-site" *ngIf="agentType=='grid'">
            <!--<ul class="one-site-type" style="margin: 20px 0 0;" (click)="siteClick(grid,'grid')" #grid>-->
              <!--<li class="one-site-img one-site-smallAirSite" [class.active] = "siteType == 'grid'"></li>-->
              <!--<li class="">网格调度</li>-->
            <!--</ul>-->
            <!--<ul class="one-site-type" style="margin: 20px 0 0;" (click)="siteClick(track,'track')" #track>-->
              <!--<li class="one-site-img one-site-smallAirSite" [class.active] = "siteType == 'track'"></li>-->
              <!--<li class="">巡检轨迹</li>-->
            <!--</ul>-->
          </div>
          <div class="one-site" *ngIf="agentType=='pollute'">
            <ul class="one-site-type" style="margin: 20px 0 0;" (click)="siteClick(industry,'industrySite')" #industry>
              <li class="one-site-img one-site-industrySite" [class.active] = "siteType == 'industrySite'"></li>
              <li class="">工业废气</li>
            </ul>
            <ul class="one-site-type" style="margin: 20px 0 0;" (click)="siteClick(waterPollutionSite,'waterPollutionSite')" #waterPollutionSite>
              <li class="one-site-img one-site-waterPollutionSite" [class.active] = "siteType == 'waterPollutionSite'"></li>
              <li class="">工业废水</li>
            </ul>
            <ul class="one-site-type" style="margin: 20px 0 0;" (click)="siteClick(quality,'smallAirSite')" #quality>
              <li class="one-site-img one-site-allNationalSite" [class.active] = "siteType == 'smallAirSite'"></li>
              <li class="">空气质量</li>
            </ul>
            <ul class="one-site-type" style="margin: 20px 0 0;" (click)="siteClick(water,'waterSurfaceSite')" #water>
              <li class="one-site-img one-site-waterSurfaceSite" [class.active] = "siteType == 'waterSurfaceSite'"></li>
              <li class="">水环境质量</li>
            </ul>
            <ul class="one-site-type" style="margin: 0 0 10px;" (click)="siteClick(enterprises,'enterprises')" #enterprises>
              <li class="one-site-img one-site-enterprises" [class.active] = "siteType == 'enterprises'"></li>
              <li class="">污染企业</li>
            </ul>
          </div>
        </div>
        <div class="one-search-grid" *ngIf="isGrid">
          <div class="one-search-grid-text">
            <input type="text" class="form-control" placeholder="请输入要查询的网格" (keyup.enter)="getMapGridInfo(searchName)" #searchName>
            <span class="one-search-icon fa fa-search"></span>
          </div>
          <div class="one-search-grid-btn">
            <button class="btn" (click)="gridClick(county,'county')" #county [class.active]="gridTypes.indexOf('county')!=-1">县级网格
            </button>
            <button class="btn" (click)="gridClick(town,'town')" #town [class.active]="gridTypes.indexOf('town')!=-1">乡镇网格</button>
            <button class="btn" (click)="gridClick(village,'village')" #village [class.active]="gridTypes.indexOf('village')!=-1">村级网格</button>
            <button class="btn" (click)="gridClick(group,'group')" #group [class.active]="gridTypes.indexOf('group')!=-1">末端网格</button>
          </div>
        </div>
        <div class="one-map-border"></div>
        <div class="one-list-container" *ngIf="isSingle">
          <div class="one-site-list-header">
            <ul class="one-content-inline">
              <li class="text-center">序号</li>
              <li>{{listName}}</li>
            </ul>
          </div>
          <div class="one-site-list" [style.maxHeight] = "maxHeight">
            <ul class="one-grid-list" *ngFor="let site of siteArr;index as i;" (click)="infoWindowEvent(site,'list')">
              <li [class]="site.className">{{i+1}}</li>
              <li> {{site.siteName || site.regionName || site.enterpriseName}}</li>
            </ul>
          </div>
          <div class="one-site-list-footer" (click)="loadData()">
            {{nullSiteList}}
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 地图类型 -->
  <div class="one-map-type-container">
    <ul class="list-inline">
      <li class="one-map-pic" [class.active]="mapType=='map'" (click)="mapTypeClick('map')">
        <span class="one-map-type-content">网格</span>
      </li>
      <li class="one-track-pic" [class.active]="mapType=='track'" (click)="mapTypeClick('track')">
        <span class="one-map-type-content">巡检监测</span>
      </li>
    </ul>
  </div>
  <!-- 巡检 -->
  <div id="routeArea" class="old-polling" *ngIf="isTrack">
    <div class="title">
      <p>
        <span class="name">环境巡检平台  (<span class="circle"></span>11/39)</span>
        <span class="ctrl" (click)="trackShrinkClick()">
            <i class="fa fa-chevron-up"></i>
        </span>
      </p>
    </div>
    <div id="track-btn" class="type-ctr" [class.active]="trackType=='real'" (click)="trackTypeClick('real')">
      <a href="javascript:void(0)">实时监控</a>
    </div>
    <div id="track-btn-2" class="type-ctr" [class.active]="trackType=='history'" (click)="trackTypeClick('history')">
      <a href="javascript:void(0)">历史轨迹</a>
    </div>
    <div class="data-box trackReal" >
      <div class="panel-mask">
        <img src="http://yingyan.baidu.com/static/images/loading-1.gif" height="82" width="82">
      </div>
      <div class="panel" style="display: block;">
        <input type="text" placeholder="请输入关键字" id="searchKey">
        <span class="search-i">
          <i class="fa fa-search"></i>
      </span>
        <div class="choose-btn">
          <div class="dropdown" style="display: inline-block;" (click)="trackDropDownClick(realDrop)" (mouseleave)="trackDropDownLeave(realDrop)" #realDrop>
            <a href="javascript:void(0)" class="btn pull-left track-type"  >全部</a>
            <ul class="dropdown-menu">
              <li class="one-triangle-left"><span class="one-triangle-border"></span></li>
              <li (click)="trackStaffClick('allDeviceType')"><label>全部</label></li>
              <li (click)="trackStaffClick('uavType')"><label>无人机</label></li>
              <li (click)="trackStaffClick('patrolCarType')"><label>巡检车</label></li>
              <li (click)="trackStaffClick('mobileType')"><label>手机</label></li>
            </ul>
          </div>
          <a href="javascript:void(0)" class="btn filter" (click)="filterChooseClick(filterReal)" #filterReal>已选</a>
          <a href="javascript:void(0)" class="btn" (click)="clearLushuData()">清除已选</a>
        </div>
        <div id="tracklist-panel">
          <ul class="tracks-ul">
            <li *ngFor="let track of trackRealArr">
              <input type="checkbox" class="cbtest" [id]="'real-'+track.deviceCode">
              <label [for]="'real-'+track.deviceCode" class="check-box" (click)="trackRealClick(track,realClick)" #realClick></label>
              <span [class]="'state '+track.statusClass" title="'+status+'"></span>
              <span>{{track.deviceName}}</span>
              <span class="state-content">{{track.status}}</span>
            </li>
          </ul>
        </div>
        <ul id="tracks-pager-ul" class="pagination"></ul>
      </div>
    </div>
    <div class="data-box trackHistory"  style="display:none;">
      <div class="panel-mask">
        <img src="http://yingyan.baidu.com/static/images/loading-1.gif" height="82" width="82">
      </div>
      <div id="track-box" style="display: block;">
        <div class="date-panel">
          <span>查询日期 </span>
          <input class="date" id="pathDate" type="text" #pathDate/>
          <span class="search-i2">
              <i class="fa fa-search"></i>
          </span>
        </div>
        <input type="text" placeholder="请输入关键字" id="searchKey_2">
        <span class="search-i">
            <i class="fa fa-search"></i>
        </span>
        <div class="choose-btn">
          <div class="dropdown" style="display: inline-block;" (click)="trackDropDownClick(histroyDrop)" (mouseleave)="trackDropDownLeave(histroyDrop)" #histroyDrop>
            <a href="javascript:void(0)" class="btn pull-left track-type" >全部</a>
            <ul class="dropdown-menu">
              <li class="one-triangle-left"><span class="one-triangle-border"></span></li>
              <li (click)="trackStaffClick('allDeviceType')"><label>全部</label></li>
              <li (click)="trackStaffClick('uavType')"><label>无人机</label></li>
              <li (click)="trackStaffClick('patrolCarType')"><label>巡检车</label></li>
              <li (click)="trackStaffClick('mobileType')"><label>手机</label></li>
            </ul>
          </div>
          <a href="javascript:void(0)" class="btn filter" (click)="filterChooseClick(filterHis)" #filterHis>已选</a>
          <a href="javascript:void(0)" class="btn" (click)="clearLushuData()">清除已选</a>
        </div>
        <div class="tracks-panel" id="tracks-panel">
          <ul class="seled-tracks-ul">
            <li class="seled-track" *ngFor="let track of trackHistoryArr;index as i;">
              <input type="checkbox" class="cbtest" [id]="'history-'+track.deviceCode">
              <label [for]="'history-'+track.deviceCode" class="check-box" (click)="trackHistoryClick(track,trackClick)" #trackClick></label>
              <span class="sel-track-name">{{track.deviceName}}</span>
              <span class="pro-bar" [style.background]="testLushuColor[i] || '#333'"><span class="bar"></span></span>
              <span class="process play" title="回放轨迹" (click)="trackSportClick(trackSport,track)" #trackSport>
                <i class="fa fa-play"></i>
              </span>
            </li>
          </ul>
        </div>
        <ul id="tracks-pager-ul-2" class="pagination"></ul>
      </div>
      <div class="tip" style="display: none;">
      </div>
    </div>
    <div id="time_span"></div>
    <!--提示-->
    <div class="chart-ctrl">
      <div class="no-track-tip">请先勾选需要统计的轨迹！</div>
      <img src="http://yingyan.baidu.com/static/images/11.png" height="52" width="52" alt="统计图">
      <span class="title">统计</span>
    </div>
    <!--纠偏-->
    <div class="jiupian">
      <img src="http://yingyan.baidu.com/static/images/22.png" height="52" width="52" alt="纠偏">
      <span class="title">纠偏</span>
    </div>
    <div class="chart-wrap">
      <div id="chart"></div>
    </div>
  </div>
  <!-- 地图容器-->
  <div id="map" class="one-map-container"></div>
  <!--地图自定义控制器-->
  <div class="one-site-control" *ngIf="isNormalMap">
    <!-- 直观/普通-->
    <ul class="list-inline one-show-site-name"> <!-- 直观/普通-->
      <li class="active" (click)="showSiteName('showName',showName)" #showName>直观</li>
      <li (click)="showSiteName('normal',normal)" #normal>普通</li>
    </ul>
    <!-- 污染物因子图例-->
    <div class="one-pollute-factors-container" *ngIf="siteType == 'smallAirSite'"> <!-- 污染物因子图例-->
      <div class="one-pollute-factors-AQI"></div>
    </div>
    <!--&lt;!&ndash; 污染物因子&ndash;&gt;-->
    <!--<div class="btn-group one-map-factor" *ngIf="isSingle && (selectorPointType =='allNationalSite' || selectorPointType =='smallAirSite') "> &lt;!&ndash; 污染物因子&ndash;&gt;-->
      <!--<div class="btn btn-default" *ngFor="let factor of factorData;" [class.active] = "factor == selectorFactor" (click)="factorTypeClick(factor)">{{factor}}</div>-->
    <!--</div>-->
  </div>
</div>
